<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>formulario</title>
</head>
<body>

	<form action="add" method="POST" name="form1">
		<label>
			Nombre
			<input type="text" name="nombre">
		</label>
		<label>
			Edad
			<input type="text" name="edad">
		</label>
		Categoría
		<label><input type="radio" name="categoria" value="Alevín">Alevín</label>
		<label><input type="radio" name="categoria" value="Infantil">Infantil</label>
		<label><input type="radio" name="categoria" value="Juvenil">Juvenil</label>
		<input type="button" value="Enviar" class="button" onclick="enviar()">
	</form>

	<script type="text/javascript">

		function enviar() { // ejemplo
			var xmlhttp = new XMLHttpRequest();

			var nombre = document.form1.nombre.value;
			var edad = document.form1.edad.value;
			var categoria = document.form1.categoria.value;

			xmlhttp.open("POST", "add", true);
			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xmlhttp.send("nombre="+nombre+"&edad="+edad+"$categoria="+categoria);


			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState==4 && xmlhttp.status==200) {
					document.getElementById('idFooter').innerHTML = xmlhttp.responseText;
				}
			}

		}

	</script>

</body>
</html>